<template>
  <div class="nav">
    <el-container>
      <el-main>
        <el-row class="ping">
          <el-col :span="12">
            <img class="logo" :src="pic" alt="" />
          </el-col>
          <el-col :span="12">
            <div class="list">
              <router-link to="/">首页</router-link>
              <router-link to="/z">生活</router-link>
              <router-link to="/x">资讯</router-link>
              <router-link to="/list">编程</router-link>             
              <router-link to="/g">互联网</router-link>
              <router-link to="/u">联系我们</router-link>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pic: require("../assets/logo.jpg"),
    };
  },
};
</script>

<style scoped>
#nav {
  background-color: #fff;
}
#nav .el-main {
  padding: 0 20px;
}
.logo {
  height: 70px;
}
.list {
  float: right;
}
.list a {
  display: inline-block;
  padding: 20px;
  color: #000;
  text-decoration: none;
}
.list a.router-link-exact-active {
  color: #42b983;
  border-bottom: 2px solid #42b983;
}
.ping{
  width: 99%;
  background-color: white;
  padding: 0;
}
</style>